<template>
	<view>
		<Header title="客资详情"></Header>
		<view class="toubu">
			<view class="content_content_con shadow" style="margin-bottom: 170rpx;" @click="tishiMsg">
				<view class="shangjia" v-for="(item,index) in list">
					<view class="heise_ziti">{{item.title}}
					</view>
					<text class="tianxie">{{item.val}}
						<image src="/static/image/index/fuzhi.png" @click="publics.fuzhi(item.val)" class="fuzhi" v-if="index==0">
						</image>
					</text>
				</view>
				<view class="shangjia no_dis">
					<view class="heise_ziti">服务城市</view>
					<view class="tianxie">
						<view>{{publics.s_dizhi()}}</view>
					</view>
				</view>
				<view class="beizhu" v-if="xinxival.kz_remark != ''">备注
					<text class="add_input">{{xinxival.kz_remark}}</text>
				</view>

				<view class="liaotian_title" v-if="xinxival.kz_voucher_pic != ''">客户线索<span>(最多上传三张图片)</span></view>
				<view class="shangchaun_photo" v-if="xinxival.kz_voucher_pic != ''">
					<view class="to_photo" v-for="(item,index) in xinxival.kz_voucher_pic" :key="index">
						<image :src="item"></image>
					</view>
				</view>
			</view>

			<view class="six_guanli__footer">
				<view class="anniu" @click="lingqu">立即领取</view>
			</view>
		</view>
		<requestLoading></requestLoading>

		<u-popup :show="popShow" :round="10" mode="bottom" @close="close" @open="open">
			<view class="gj_body">
				<view class="gj_title">
					<view class="title_text">
						添加跟进
					</view>
					<view class="closePopup" @click="popShow = false">
						<image src="../../static/other/close.png" mode=""></image>
					</view>
				</view>
				<view class="gj_cont">
					<!-- 跟进类型 -->
					<view class="gj_type">
						<view class="gj_type_title">
							跟进类型
						</view>
						<view class="gj_list">
							<view class="gj_item fl-center" v-for="(item,index) in gj_list" :key="index" @click="chooseGJ(item,index)"
								:class="GJIndex == index ? 'gjActive' : ''" v-if="!cancelDD">
								<view class="">
									{{ item.text }}
								</view>
							</view>
							<view class="gj_item fl-center gjActive" v-if="cancelDD">
								<view class="">
									取消订单
								</view>
							</view>
						</view>
					</view>
					<!-- 取消原因 -->
					<view class="gj_type" v-if="cancelDD">
						<view class="gj_type_title">
							取消原因
						</view>
						<view class="select_btn">
							<view class="">
								请选择您取消订单的原因
							</view>
							<view class="expand">
								<image src="../../static/other/expand.png" mode=""></image>
							</view>
						</view>
						<u-picker :show="show" :columns="columns"></u-picker>
					</view>

					<!-- 客户标记(多选) -->
					<view class="gj_type" v-if="!cancelDD">
						<view class="gj_type_title">
							客户标记(多选)
						</view>
						<view class="gj_list">
							<view class="gj_item fl-center" v-for="(item,index) in bj_list" :key="index" @click="chooseBJ(item,index)"
								:class="bj_active_list.includes(index) ? 'bjActive' : ''">
								<view class="" style="display: flex;align-items: center;">
									<image v-if="item.imgUrl !== ''" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
										:src="item.imgUrl" mode=""></image>
									<view class="">
										{{ item.text }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 跟进客户近况 -->
					<view class="gj_type" v-if="!cancelDD">
						<view class="gj_type_title">
							跟进客户近况
						</view>
						<view class="gjjk">
							请填写客户本次跟进记录，便于平台与您对客户的下次 跟进.......
						</view>
					</view>
					<!-- 上传图片 -->
					<view class="gj_type">
						<view class="gj_type_title">
							上传图片
						</view>
						<view class="gjjk">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="10"></u-upload>
						</view>
					</view>
					
				</view>
				
				<view class="submit fl-center">
					<view class="sub_btn fl-center">
						<view class="">
							提交
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tishi: 1, //展示加载动画
				showtankuang: false,
				xiugaiBtn: false,
				show_s: false,
				list: [{
					title: '客资ID',
					val: "",
				}, {
					title: '派单时间',
					val: ""
				}, {
					title: '姓名',
					val: ""
				}, {
					title: '微信号',
					val: ""
				}, {
					title: '联系方式',
					val: ""
				}, {
					title: '预计婚期',
					val: ""
				}, {
					title: '客户类型',
					val: ""
				}],
				show: false,
				xinxi: {
					state: 1, //
				},
				jindutiao: [{
					name: '提交客资',
					state: 0
				}, {
					name: '审核通过',
					state: 1
				}, {
					name: '已分配商家',
					state: 2
				}, {
					name: '正在跟进',
					state: 3
				}],
				xinxival: {
					changLog: [],
					kz_remark: '',
					kz_voucher_pic: '',
					kz_wantcity: ''
				},
				kzid: '',
				lookBtn: false,
				cancelDD: false,
				xin: {
					phone: '111',
					weixin: '222'
				},
				typeid: '',
				popShow: true,
				gj_list: [{
						text: '跟进中',
					},
					{
						text: '订单成交',
					},
					{
						text: '客资退回',
					},
					{
						text: '放弃客资',
					},
					{
						text: '转让给同事',
					},
				],
				bj_list: [{
						text: '微信待通过',
						imgUrl: '../../static/other/wx_pending.png'
					},
					{
						text: '已加微信',
						imgUrl: '../../static/other/wx_succ.png'
					},
					{
						text: '未通过/被拒绝',
						imgUrl: '../../static/other/wx_err.png'
					},
					{
						text: '已约进店',
						imgUrl: ''
					},
					{
						text: '已约他家',
						imgUrl: ''
					},
					{
						text: '已约他家锁单客户',
						imgUrl: ''
					},
				],
				bj_active_list: [],
				GJIndex: 0,
				bjIndex: null,
				fileList1: [],
			}
		},
		onLoad(option) {
			this.kzid = option.id;
			this.typeid = option.typeid;
			this.kezi_xiangqing(option.kzid);
			console.log(option, "option")
		},
		methods: {
			tishiMsg() {
				uni.showToast({
					title: '请先领取客资',
					icon: 'none'
				})
			},
			kezi_xiangqing() {
				var that = this;
				this.configure.ajax({
					url: 'kz/findOne',
					tishi: that.tishi,
					data: {
						kzid: that.kzid,
						typeid: 1
					},
					method: 'POST',
					success: function(res) {
						that.xinxival = res.data.resource
						that.xinxival.kz_voucher_pic = res.data.resource.kz_voucher_pic.split(",");
						// that.xinxival.kz_voucher_pic=JSON.parse(res.data.resource.kz_voucher_pic.replace(/\ufeff/g,""));
						that.xinxival.kz_remark = res.data.resource.kz_remark
						that.list[0].val = res.data.resource.id;
						that.list[1].val = res.data.resource.kztoshoptime;
						that.list[2].val = res.data.resource.kz_name;
						that.list[3].val = res.data.resource.kz_wechat;

						that.list[4].val = res.data.resource.kz_tel;
						that.list[5].val = res.data.resource.kz_wedding;
						that.list[6].val = res.data.resource.serve_type;
						// that.xinxival.kz_wantcity=res.data.resource.kz_wantcity;
						that.xinxival.kz_wantcity = res.data.resource.kz_wantcity;
					}
				})
			},
			tankuang_show(index) {
				console.log('index')
				console.log()
				this.show = true;
				// console.log(e,"e")
			},
			guan(e) {
				console.log('daa')
				console.log(e)
				this.kezi_xiugai(e)
				this.show_s = false;
			},
			kezi_xiugai(e) {
				var that = this;
				this.configure.ajax({
					url: 'kz/allkz',
					tishi: that.tishi,
					data: {
						kzId: that.kzId,
						// kzTel:e.zhi.phone,
						// kzWechat:e.zhi.weixin,
					},
					method: 'POST',
					success: function(res) {
						console.log('修改成功')
						that.kezi_xiangqing()
					}
				})
			},
			guanbi() {
				console.log('vvvvvvvvv')
				this.show = false;

			},
			lingqu() {
				// this.show_s = true;
				// this.publics.reLaunch('/view/public/login')
				// this.showtankuang=true
				var that = this;
				this.configure.ajax({
					url: 'kz/lingquKZ',
					tishi: that.tishi,
					data: {
						kzid: that.kzid,
					},
					method: 'POST',
					success: function(res) {
						uni.showToast({
							title: '领取成功',
							icon: "none"
						});
						uni.navigateBack();
					}
				})

			},
			open() {
				// console.log('open');
			},
			close() {
				this.popShow = false
				// console.log('close');
			},
			chooseGJ(item, index) {
				// this.GJIndex = index
				if (this.GJIndex == index) {
					console.log(this.GJIndex)
					console.log(index)
					this.GJIndex = null
					return
				}
				if (this.GJIndex !== index) {
					this.GJIndex = index
					console.log(this.GJIndex)
					console.log(index)
				}
			},
			chooseBJ(item, index) {
				if (this.bj_active_list.includes(index)) {
					this.bj_active_list = this.bj_active_list.filter(item => item != index)
					return
				}
				if (this.bjIndex !== index) {
					this.bjIndex = index
					this.bj_active_list.push(this.bjIndex)
					console.log(this.bj_active_list)
				}

			},

			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fuzhi {
		width: 24rpx;
		height: 24rpx;
		margin-left: 18rpx;
	}

	.liaotian_title {
		margin-top: 40rpx;
		margin-bottom: 30rpx;
		font-size: 30rpx;
		color: $heise_ziti;

		span {
			color: $qianhui_ziti;
			font-size: 20rpx;
		}
	}

	.shangchaun_photo {
		width: calc(100%-120rpx);
		margin: auto;
		display: flex;
		// justify-content: space-between;
		margin-bottom: 30rpx;


	}

	.to_photo {
		background-color: $qianhui_white;
		width: 190rpx;
		height: 210rpx;
		border-radius: 12rpx;
		border: solid 10rpx $white_ziti;
		box-shadow: $shadow;

		image {
			width: 190rpx;
			height: 210rpx;
			margin: auto;
		}
	}

	.yinhangka_guanli__footer {
		width: 100%;
		height: 140rpx;
		position: fixed;
		bottom: 0rpx;
		background: $white_ziti;

		view {
			margin-top: 30rpx;
		}
	}

	.zhaungtai {
		display: flex;
		justify-content: space-between;
		height: 110rpx;
		line-height: 110rpx;
		color: $heise_ziti;
		font-size: 30rpx;
	}

	.shangchaun_photo view:nth-child(2) {
		margin: 0 10rpx 0 10rpx;
	}

	.no_dis {
		display: block;

		.tianxie {
			padding-left: 10rpx;
			display: flex;
		}

	}

	.btn_shenhe {
		padding: 10rpx 20rpx 10rpx 20rpx;
		background-color: $chengse_color;
		color: $white_ziti;
		text-align: center;
		margin: auto 0;
		line-height: 60rpx;
		border-radius: 6rpx;
	}

	.beizhu {
		line-height: 110rpx;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.tianxie {
		font-size: 28rpx;
		color: $qianhui_ziti;
	}

	.add_input {
		font-size: 28rpx;
		color: $qianhui_ziti;
		width: calc(100%-60rpx);
		height: 90rpx;
		background-color: $qianhui_white;
		padding-left: 30rpx;
		border-radius: 12rpx;
		line-height: 90rpx;
		margin-bottom: 30rpx;
	}

	.dianji_photo {
		width: calc(100%-120rpx);
		text-align: center;
		background-color: $qianhui_white;
		width: 190rpx;
		height: 210rpx;
		border-radius: 12rpx;
		border: solid 10rpx $white_ziti;
		box-shadow: $shadow;
		margin-bottom: 40rpx;

		image {
			width: 60rpx;
			height: 60rpx;
			padding-top: 60rpx;
		}

		._photo {
			font-size: 26rpx;
			color: $qianhui_ziti;
		}
	}

	.dianji_photo view:nth-child(2) {
		margin: 0 10rpx 0 10rpx;
	}




	.kezi_jindu {
		display: flex;
		justify-content: flex-start;
		font-size: 24rpx;
		height: 88rpx;

		.kezi_jindu_dian {
			width: 42rpx;
			overflow: hidden;
			margin-right: 20rpx;

			.kezi_jindu_dian_dian {
				width: 18rpx;
				height: 18rpx;
				border-radius: 50%;
				background: $green_color;
				border: 6rpx solid $white_ziti;
				box-shadow: $shadow;
				// margin:12rpx;
			}

			.kezi_jindu_xian {
				width: 2rpx;
				height: 66rpx;
				margin-left: 14rpx;
				background: $green_color;
			}
		}

	}

	.kezi_jindu:last-child .kezi_jindu_dian .kezi_jindu_xian {
		height: 0rpx;
	}

	.green {
		background-color: #06CE00;
	}

	.chengse {
		background-color: #FEAE3B;
	}

	.cheng {
		background-color: #FEAE3B;
	}

	.hong {
		background-color: #FF2626;
	}

	.btn_kan {
		margin-left: 20rpx;
		color: red;
	}

	.wenzi {
		font-size: 34rpx;
		border-bottom: 2rpx solid var(--qianhui_eee);
	}

	.xinxi {
		padding: 20rpx 40rpx 20rpx 40rpx;
	}

	.nicheng_content {
		width: calc(100% - 120rpx);
		overflow: hidden;
		margin: 0 auto;
		background-color: $white_ziti;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
	}

	.six_guanli__footer {
		width: 100%;
		height: 140rpx;
		position: fixed;
		bottom: 0px;
		background: $white_ziti;

		view {
			margin-top: 30rpx;
		}
	}

	.genjin {
		color: $heise_ziti;
		font-size: 34rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		margin-left: 30rpx;
	}

	.zhuangtai {
		width: calc(100% - 114rpx);
		height: 460rpx;
	}

	.kezi_jindu_dian {
		width: 42rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.kezi_jindu_dian_dian {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 2rpx solid $zhuce_color;
		box-shadow: $shadow;
		// margin:12rpx;
	}

	.kezi_jindu_xian {
		width: 2rpx;
		height: 500rpx;
		margin-left: 14rpx;
		background: $zhuce_color;
	}

	.list_zt {
		font-size: 24rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.beijing {
		background-color: $qianhui_eee;
		width: calc(100% - 50rpx);
		margin: auto;
		padding-bottom: 2rpx;
	}

	.beizhu_ {
		font-size: 24rpx;
		color: $qianhuione_ziti;
		padding-left: 30rpx;
		line-height: 79rpx;
	}

	.photo {
		width: 106rpx;
		height: 116rpx;
		border: solid 6rpx $white_ziti;
		border-radius: 6rpx;
		margin-left: 22rpx;
		margin-bottom: 30rpx;
	}

	.ztai {
		color: $heise_ziti;
		font-size: 30rpx;
		padding-top: 30rpx;
		padding-left: 30rpx;
	}

	.shijian {
		color: $qianhui_ziti;
		font-size: 20rpx;
		padding-left: 30rpx;
		padding-top: 8rpx;
		padding-bottom: 24rpx;
	}

	.content_xinx {
		display: flex;
		justify-content: space-between;
	}

	.touxiang {
		display: flex;
		padding-left: 30rpx;
		padding-top: 24rpx;
		padding-bottom: 30rpx;

		image {
			width: 34rpx;
			height: 34rpx;
			border-radius: 50%;
		}

		.name_kz {
			color: $heise_ziti;
			font-size: 26rpx;
			padding-left: 13rpx;
		}
	}

	.end_money {
		display: flex;
		padding-right: 30rpx;
		padding-top: 24rpx;
		padding-bottom: 30rpx;
	}

	.qian {
		font-size: 24rpx;
		color: $zhuce_color;
	}

	.danwei {
		font-size: 20rpx;
		color: $qianhui_ziti;
	}

	._photo {
		display: flex;
	}

	.gj_body {
		display: flex;
		flex-direction: column;
		position: relative;
		padding-bottom: 80rpx;
		.gj_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			box-sizing: border-box;
			font-weight: 600;
			font-size: 30rpx;
			color: #222222;

			.closePopup {
				width: 32rpx;
				height: 32rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.gj_cont {
		width: 690rpx;
		display: flex;
		flex-direction: column;
		margin: 30rpx auto 0;
	}

	.gj_type {
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #EFEFEF;
		margin: 0 0 30rpx;
	}

	.gj_type_title {
		font-size: 28rpx;
		color: #343434;
		margin-bottom: 30rpx;
	}

	.gj_list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.fl-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.gj_item {
		// width: 150rpx;
		height: 60rpx;
		background: #F4F4F4;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		margin: 0 0 30rpx 0;
		font-size: 28rpx;
		color: #999999;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	.bj_item {
		// width: 150rpx;
		height: 60rpx;
		background: #F4F4F4;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		margin: 0 0 30rpx 0;
		font-size: 28rpx;
		color: #999999;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	.gjActive {
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		border: 1rpx solid #FE609D;
		font-size: 28rpx;
		color: #FE609D;
		background-color: #fff;
		box-sizing: border-box;
	}

	.bjActive {
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		border: 1rpx solid #FE609D;
		font-size: 28rpx;
		color: #FE609D;
		background-color: #fff;
		box-sizing: border-box;
	}

	.gjjk {
		width: 672rpx;
		font-size: 28rpx;
		color: #7E7E7E;
		line-height: 40rpx;
		margin-bottom: 20rpx;
	}
	
	.select_btn {
		width: 100%;
		height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #7E7E7E;
		margin-bottom: 20rpx;
		.expand {
			width: 20rpx;
			height: 13rpx;
			image {
				width: 20rpx;
				height: 13rpx;
			}
		}
	}
	
	.submit {
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 10rpx 0rpx rgba(0,0,0,0.1);
		position: absolute;
		left: 0;
		bottom: 0;
		.sub_btn {
			width: 630rpx;
			height: 80rpx;
			background: #FE609D;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 45rpx;
		}
	}
</style>